<ng-container *ngFor="let typ of type">
  <ng-container *ngIf="typ ==='link'">
    <a class="repo-btn link-btn" target="_blank" [href]="getGithubUrl().base">
      <div class="box title-box">
        <svg aria-hidden="true" version="1.1" width="12" height="15" viewBox="2 0 12 15" class="icon icon-link">
          <g fill-rule="evenodd">
            <path d="M8.863 6.247a2.622 2.622 0 0 0-.267-.23.53.53 0 1 0-.643.834c.05.041.1.082.145.128l.044.044c.55.548.385 1.493-.164 2.042l-2.343 2.342a1.41 1.41 0 0 1-1.99 0l-.045-.044a1.408 1.408 0 0 1 0-1.99l1.035-1.035a.574.574 0 0 0-.68-.927l-.001-.001-.011.01a.578.578 0 0 0-.11.102L2.758 8.53a2.608 2.608 0 0 0 0 3.677l.043.044a2.608 2.608 0 0 0 3.677 0L8.82 9.907C9.83 8.896 9.916 7.3 8.906 6.29l-.043-.043z"></path>
            <path d="M12.24 2.811l-.044-.043a2.607 2.607 0 0 0-3.677 0L6.177 5.11C5.165 6.12 5.11 7.582 6.12 8.594l.043.042c.046.046.093.09.142.13.035.04.077.074.123.1v.001a.5.5 0 0 0 .7-.651c-.066-.149-.19-.239-.275-.325L6.81 7.85c-.55-.549-.34-1.347.208-1.896l2.344-2.342c.548-.55 1.44-.55 1.99 0l.043.043c.55.55.55 1.443 0 1.991l-1.031 1.033a.57.57 0 0 0 .638.944l.002.004.016-.015a.575.575 0 0 0 .13-.12l1.087-1.003a2.606 2.606 0 0 0 .001-3.677z"></path>
          </g>
        </svg>
        <span class="title">GitHub</span>
      </div>
    </a>
  </ng-container>

  <ng-container *ngIf="typ === 'watch'">
    <a class="repo-btn watch-btn" target="_blank" [href]="getGithubUrl().watch">
      <div class="box title-box">
        <svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="icon watch-icon">
          <path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"></path>
        </svg>
        <span class="title">Watch</span>
      </div>
      <div class="box count-box">
        <span class="count">{{repository?.subscribers_count}}</span>
      </div>
    </a>

  </ng-container>

  <ng-container *ngIf="typ === 'star'">
    <a class="repo-btn star-btn" [href]="getGithubUrl().star" target="_blank">
      <div class="box title-box">
        <svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 14 16" width="14" class="icon star-icon">
          <path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74z"></path>
        </svg>
        <span class="title">Star</span>
      </div>
      <div class="box count-box">
        <span class="count">{{repository?.stargazers_count}}</span>
      </div>
    </a>

  </ng-container>


  <ng-container *ngIf="typ === 'fork'">
    <a class="repo-btn fork-btn" [href]="getGithubUrl().fork" target="_blank">
      <div class="box title-box">
        <svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 10 16" width="10" class="icon fork-icon">
          <path fill-rule="evenodd" d="M8 1a1.993 1.993 0 0 0-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V6.5l3 3v1.78A1.993 1.993 0 0 0 5 15a1.993 1.993 0 0 0 1-3.72V9.5l3-3V4.72A1.993 1.993 0 0 0 8 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path>
        </svg>
        <span class="title">Fork</span>
      </div>
      <div class="box count-box">
        <span class="count">{{repository?.forks_count}}</span>
      </div>
    </a>
  </ng-container>


  <ng-container *ngIf="typ === 'issue'">
    <a class="repo-btn issues-btn" [href]="getGithubUrl().issue" target="_blank">
      <div class="box title-box">
        <svg version="1.1" height="16" viewBox="0 0 14 16" class="icon issues-icon" aria-hidden="true">
          <path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path>
        </svg>
        <span class="title">Issue</span>
      </div>
      <div class="box count-box">
        <span class="count">{{repository?.open_issues_count}}</span>
      </div>
    </a>
  </ng-container>

  <ng-container *ngIf="typ === 'download'">
    <a class="repo-btn download-btn" [href]="getGithubUrl().download" target="_blank">
      <div class="box title-box">
        <svg version="1.1" height="16" viewBox="0 0 16 16" class="icon download-icon" aria-hidden="true">
          <path fill-rule="evenodd" d="M9 12h2l-3 3-3-3h2V7h2v5zm3-8c0-.44-.91-3-4.5-3C5.08 1 3 2.92 3 5 1.02 5 0 6.52 0 8c0 1.53 1 3 3 3h3V9.7H3C1.38 9.7 1.3 8.28 1.3 8c0-.17.05-1.7 1.7-1.7h1.3V5c0-1.39 1.56-2.7 3.2-2.7 2.55 0 3.13 1.55 3.2 1.8v1.2H12c.81 0 2.7.22 2.7 2.2 0 2.09-2.25 2.2-2.7 2.2h-2V11h2c2.08 0 4-1.16 4-3.5C16 5.06 14.08 4 12 4z"></path>
        </svg>
        <span class="title">Download</span>
      </div>
    </a>
  </ng-container>

</ng-container>
